<template>
  <div class="mod-groupActivity">
    <el-dialog
      v-model="visible"
      :title="$t('groups.viewActivityDetails')"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        :disabled="true"
        :label-width="$t('language') === 'language' ? '200px' : '140px'"
        @submit.prevent
      >
        <el-form-item
          :label="$t('seckill.activityName')"
          prop="activityName"
        >
          <el-input
            v-model="dataForm.activityName"
            :placeholder="$t('groups.enterEventName')"
            :disabled="dataForm.activityStatus > 2"
            class="groupActivity-input"
          />
        </el-form-item>
        <el-form-item
          :label="$t('groups.activityStartTime')"
          prop="startTime"
        >
          <el-date-picker
            v-model="dataForm.startTime"
            :disabled="dataForm.activityStatus ? dataForm.activityStatus !== 1 : false"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetime"
            class="date-picker"
            :placeholder="$t('groups.selectEventStartTime')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('groups.eventEndTime')"
          prop="endTime"
        >
          <el-date-picker
            v-model="dataForm.endTime"
            :disabled="dataForm.activityStatus ? dataForm.activityStatus > 2 : false "
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetime"
            class="date-picker"
            :placeholder="$t('groups.selectEventEndTime')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('groups.numberOfParticipants')"
          prop="groupNumber"
        >
          <el-input
            v-model="dataForm.groupNumber"
            type="number"
            :disabled="dataForm.activityStatus ? dataForm.activityStatus !== 1: false"
            class="groupActivity-input"
          >
            <template #append>
              {{ $t('groups.people') }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="$t('groups.groupValidityPeriod')"
          prop="groupValidTime"
        >
          <el-input
            v-model="dataForm.groupValidTime"
            type="number"
            :disabled="dataForm.activityStatus ? dataForm.activityStatus !== 1: false"
            class="groupActivity-input"
          >
            <template #append>
              {{ $t('groups.minute') }}
            </template>
          </el-input>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('groups.tip4')"
            placement="right"
          >
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item
          :label="$t('groups.limitPurchase')"
          prop="hasMaxNum"
        >
          <el-radio-group
            v-model="dataForm.hasMaxNum"
            :disabled="dataForm.activityStatus ? dataForm.activityStatus !== 1: false"
          >
            <el-radio :label="0">
              {{ $t('seckill.close') }}
            </el-radio>
            <el-radio :label="1">
              {{ $t('groups.turnOn') }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="dataForm.hasMaxNum"
          :label="$t('seckill.purchaseLimit')"
          prop="maxNum"
        >
          <el-input
            v-model="dataForm.maxNum"
            :disabled="dataForm.activityStatus ? dataForm.activityStatus !== 1: false"
            class="groupActivity-input"
          >
            <template #append>
              {{ $t('groups.memberPeople') }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="$t('groups.simulation')"
          prop="hasRobot"
        >
          <div>
            <el-radio-group
              v-model="dataForm.hasRobot"
              :disabled="dataForm.activityStatus ? dataForm.activityStatus > 2: false"
            >
              <el-radio :label="0">
                {{ $t('seckill.close') }}
              </el-radio>
              <el-radio :label="1">
                {{ $t('groups.turnOn') }}
              </el-radio>
            </el-radio-group>
            <div class="auxiliary-font">
              <span>{{ $t('groups.tip5') }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('groups.groupMode')"
          prop="hasGroupTip"
        >
          <el-radio-group
            v-model="dataForm.hasGroupTip"
            :disabled="dataForm.activityStatus ? dataForm.activityStatus > 2: false"
          >
            <el-radio :label="0">
              {{ $t('seckill.close') }}
            </el-radio>
            <el-radio :label="1">
              {{ $t('groups.turnOn') }}
            </el-radio>
          </el-radio-group>
          <div class="auxiliary-font">
            {{ $t('groups.tip8') }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('groups.activityWarmUp')"
          prop="isPreheat"
        >
          <el-radio-group
            v-model="dataForm.isPreheat"
            :disabled="dataForm.activityStatus ? dataForm.activityStatus !== 1: false"
          >
            <el-radio :label="0">
              {{ $t('seckill.close') }}
            </el-radio>
            <el-radio :label="1">
              {{ $t('groups.turnOn') }}
            </el-radio>
          </el-radio-group>
          <div class="auxiliary-font">
            {{ $t('groups.cannotrOpen') }}
          </div>
        </el-form-item>
        <!-- 商品选择框 -->
        <el-form-item
          :label="$t('groups.selectProd')"
          prop="spuId"
        >
          <!-- 商品 -->
          <div style="margin-bottom:14px">
            <el-card
              :body-style="{ padding: '0px' }"
              style="height: 160px;width: 120px"
            >
              <ImgShow
                :src="dataForm.prodPic"
                :img-style="{width:'100%',height:'104px'}"
              />
              <div class="card-prod-bottom">
                <span class="card-prod-name">{{ dataForm.prodName }}</span>
              </div>
            </el-card>
          </div>
          <!-- 商品sku列表 -->
          <div v-if="dataForm.groupSkuList && dataForm.groupSkuList.length > 0">
            <el-table
              :data="dataForm.groupSkuList"
              header-cell-class-name="table-header"
              style="width: 100%"
            >
              <el-table-column :label="dataForm.groupSkuList.length > 1?'sku名称':'商品名称'">
                <template #default="scope">
                  <span>{{ dataForm.groupSkuList.length > 1? scope.row.skuName:dataForm.prodName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="活动价格">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.actPrice"
                    :min="0.01"
                    :max="100000000"
                    :disabled="true"
                    class="groupActivity-input"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="visible = false"
          >{{ $t('coupon.confirm') }}</el-button>
        </span>
      </template>

      <prods-select
        v-if="groupSelectProdVisible"
        ref="ProdsSelectRef"
        @refresh-select-prods="selectGroupProds"
      />
    </el-dialog>
  </div>
</template>

<script setup>
const groupSelectProdVisible = ref(false)
// eslint-disable-next-line no-unused-vars
const validateTime = (rule, value, callback) => {
  if (rule.field === '"endTime"' && new Date() > Date.parse(value)) {
    callback(new Error($t('groups.activityTimeTime')))
  }
  if (Date.parse(dataForm.value.startTime) >= Date.parse(dataForm.value.endTime)) {
    callback(new Error($t('groups.endTimeIsTooSmall')))
  } else if (dataForm.value.status === 1 && dataForm.value.groupActivityId && Date.parse(validEndTime) > Date.parse(dataForm.value.endTime)) {
    callback(new Error($t('groups.extendedEndTime')))
  } else {
    callback()
  }
}
// eslint-disable-next-line no-unused-vars
const validateGroupNumber = (rule, value, callback) => {
  if (dataForm.value.groupNumber < 2) {
    callback(new Error($t('groups.tip1')))
  } else {
    callback()
  }
}
// eslint-disable-next-line no-unused-vars
const validateGroupValidTime = (rule, value, callback) => {
  if (dataForm.value.groupValidTime < 15) {
    callback(new Error($t('groups.tip2')))
  } else if (dataForm.value.groupValidTime > 24 * 60) {
    callback(new Error($t('groups.tip3')))
  } else {
    callback()
  }
}
const dataRule = {
  activityName: [
    { required: true, message: '请输入活动名称', trigger: 'blur' }
  ],
  groupNumber: [
    { required: true, message: '请输入成团人数', trigger: 'blur' },
    { validator: validateGroupNumber, trigger: 'blur' }
  ],
  groupValidTime: [
    { required: true, message: '请输入成团有效时间', trigger: 'blur' },
    { validator: validateGroupValidTime, trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '开始时间不能为空', trigger: 'blur' },
    { validator: validateTime, trigger: 'blur' }
  ],
  endTime: [
    { required: true, message: '结束时间不能为空', trigger: 'blur' },
    { validator: validateTime, trigger: 'blur' }
  ]
}

const dataForm = ref({
  groupActivityId: null,
  shopId: null,
  activityName: null,
  status: null,
  startTime: null,
  endTime: null,
  groupValidTime: null,
  groupNumber: null,
  hasMaxNum: 0,
  maxNum: null,
  hasRobot: 0,
  hasLeaderPrice: 0,
  isPreheat: 0,
  hasGroupTip: 0,
  groupOrderCount: null,
  groupNumberCount: null,
  createTime: null,
  updateTime: null,
  groupProds: [],
  validEndTime: []
})
let validEndTime = []
const dataFormRef = ref(null)
const visible = ref(false)
const init = (groupActivityId) => {
  dataForm.value.groupActivityId = groupActivityId || null
  dataForm.value.activityStatus = null
  visible.value = true
  nextTick(() => {
    dataFormRef.value?.resetFields()
    if (dataForm.value.groupActivityId) {
      http({
        url: http.adornUrl('/platform/group/activity/info/' + dataForm.value.groupActivityId),
        method: 'get',
        params: http.adornParams()
      })
        .then(({ data }) => {
          dataForm.value = data
          validEndTime = data.endTime
        })
    }
  })
}
defineExpose({ init })

/**
 * 选商品回调
 * @param prods
 */
const selectGroupProds = (prods) => {
  if (prods) {
    const prodIds = []
    dataForm.value.groupProds = prods
    for (let index = 0; index < prods.length; index++) {
      prodIds.push(prods[index].prodId)
    }
    getProdAndSkuListsByProdIds(prodIds)
  }
}

const groupProdAndSkuLists = ref([])
/**
 * 通过商品id列表，查询所有的对应的sku列表
 * @param prodIds
 */
const getProdAndSkuListsByProdIds = (prodIds) => {
  if (prodIds) {
    http({
      url: http.adornUrl('/group/activity/getProdAndSkuLists?prodIds=' + prodIds),
      method: 'get',
      params: {}
    })
      .then(({ data }) => {
        groupProdAndSkuLists.value = data
      })
  }
}
</script>
<style lang="scss" scoped>
.mod-groupActivity {
  .date-picker {
    width: 60%;
  }
  .card-prod-bottom {
    position: relative;
    text-align: left;
    .card-prod-name {
      margin: auto;
      padding: 0 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 118px;
      display: inline-block;
    }
  }
  .groupActivity-input {
    width: 60%;
  }
  .auxiliary-font {
    font-size: 12px;
    color: #cbc0cb;
    line-height: 20px;
  }
}
.card-prod-bottom {
  display: flex;
  justify-content: space-around;
}
.card-prod-name {
  margin: auto;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 118px;
  display: inline-block;
  line-height: 50px;
}
:deep(.el-form-item__content) {
  display: block;
}
</style>
